<html>
<head>
<style>
div#leftside				{ position: absolute; height: 100%; top: 0px; left: 0px; padding: 5px 15px 5px 5px; width: 300px;
					  background-color: pink;
					  border-right: 1px solid gray; }
div.quo					{ position:absolute; right: 2px; top: -1px; color: blue; font-size: 130%; }
div#rightside				{ position: absolute; height: 100%; top: 0px; right: 0px; padding: 5px 5px 5px 15px; width: 300px;
					  background-color: magenta;
					  border-left: 1px solid gray; }
div#rightside div.quo			{ position:absolute; left: 2px; top: -1px; color: blue; font-size: 130%; }
div.quo a				{ text-decoration: none; }
div.quo a:hover				{ text-decoration: none; font-weight: bold; }

div.bdy					{ width: 50%; }
body					{ margin: 0px 0px 0px 315px; padding: 0px 5px 0px 3px; background-color: yellow; }
</style>
<script>
var cs__realign = {
	'align': {	'leftside': { 'width': 300, 'toggle': true },
			'middleside': { 'width': 300, 'toggle': true },
		 	'leftside': { 'width': 300, 'toggle': true } },
	'toggle': function() {
		e = window.event;
		cs__realign.align[e.target.parentNode.parentNode.id].toggle = !cs__realign.align[e.target.parentNode.parentNode.id].toggle;
		cs__realign.reset();
		return false;
	},
	'reset': function() {

		// cannot minimize all
		if( !cs__realign.align.leftside.toggle && !cs__realign.align.middleside.toggle ) cs__realign.align.middleside.toggle = true;

		// set 	anchor innerHTML
		for( var side in cs__realign.align ) {
			var s = document.querySelector('#'+side+' > div.quo a');
			s.innerHTML = (cs__realign.align[side].toggle) ? '\u00ab' : '\u00bb';
			//-alert( 'side='+side+', s='+s+', html='+s.innerHTML );
		}

		// set widths
		var full = window.innerWidth;
		if( cs__realign.align.leftside.toggle && cs__realign.align.middleside.toggle ) {
			alert( 'left=true, middle=true' );
			document.getElementById('leftside').style.left = '0px';
			document.getElementById('middleside').style.marginLeft = (cs__realign.align.leftside.width + 10) + 'px';
		}
		else if( !cs__realign.align.leftside.toggle && cs__realign.align.middleside.toggle ) {
			alert( 'left=false, middle=true' );
			document.getElementById('leftside').style.left = '-'+(cs__realign.align.leftside.width-5)+'px';
			document.getElementById('middleside').style.marginLeft = '15px';
		}
	}
}
</script>
</head>
<body id='middleside' >
<div id='leftside' >
<div class='quo' ><a href='expand' onclick='return cs__realign.toggle()'>&laquo;</a></div>
left side
</div>
<div id='rightside' >
<div class='quo' ><a href='expand' onclick='return cs__realign.toggle()'>&laquo;</a></div>
right side
</div>
middle side
<div class='quo' ><a href='expand' onclick='return cs__realign.toggle()'>&laquo;</a></div>
</body>
</html>
